import React, { useState } from 'react';
import { DndContext, useDraggable } from '@dnd-kit/core';
import {
  Droppable,
  Wrapper,
  GridContainer,
  Draggable,
  DraggableItem,
  DraggableOverlay,
} from './components';

function DroppableStory({ containers = ['A'], collisionDetection, modifiers }: any) {
  const [isDragging, setIsDragging] = useState(false);
  const [parent, setParent] = useState<any>(null);

  const item = <DraggableItem handle id={'eeee'} label="" showElement="i点击欸哦" />;

  return (
    <DndContext
      collisionDetection={collisionDetection}
      modifiers={parent === null ? undefined : modifiers}
      onDragStart={() => setIsDragging(true)}
      onDragEnd={({ over }) => {
        setParent(over ? over.id : null);
        setIsDragging(false);
      }}
      onDragCancel={() => setIsDragging(false)}
    >
      <Wrapper>
        <Wrapper style={{ width: 350, flexShrink: 0 }}>{parent === null ? item : null}</Wrapper>
        <GridContainer columns={1}>
          {containers.map((id: string) => (
            <Droppable key={id} id={id} dragging={isDragging}>
              {parent === id ? item : null}
            </Droppable>
          ))}
        </GridContainer>
      </Wrapper>
      <DraggableOverlay showElement="i点击欸哦" />
    </DndContext>
  );
}

export default DroppableStory;
